<template>
    <div class="ec-app-container">
        <!-- 查询条件 -->
        <div class="filter-container">
            <el-form label-width="90px">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="楼盘名称：" >
                            <el-input v-model="listQuery.buildingName" placeholder="楼盘名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="城市：" >
                            <el-input v-model="listQuery.title" placeholder="城市"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="楼盘状态：" >
                            <el-select v-model="listQuery.buildingStatus" placeholder="楼盘状态" clearable>
                                <el-option v-for="(item, index) in GLOBAL.buildingStatus" :label= "item" :value="index+1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="text-center">
                        <el-button type="primary" class="border-4C7FD7 color-4C7FD7" icon="el-icon-search" @click="searchList">查询</el-button>
                        <el-button class="border-4C7FD7 color-4C7FD7" @click="resetSearch">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- table -->
        <div>
            <div class="mt-30">
                <el-row>
                    <el-col :span="12">
                        <el-button class="filter-item" type="primary" @click="searchListByReleaseStatus('')">全部</el-button>
                        <el-button class="filter-item" type="primary" @click="searchListByReleaseStatus(1)">待发布</el-button>
                        <el-button class="filter-item" type="primary" @click="searchListByReleaseStatus(0)">已发布</el-button>
                    </el-col>
                    <el-col :span="12" class="text-right">
                        <el-button class="filter-item" type="primary" @click="toPath('createbuilding')">新增</el-button>
                        <el-button class="filter-item" type="primary" @click="exportBuilding">导出</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="mt-20">
                <el-table
                    v-loading="listLoading"
                    :data="list"
                    border
                    fit
                    highlight-current-row
                    @selection-change="handleSelectionChange"
                    style="width: 100%;">
                    <el-table-column
                        type="selection"
                        width="55"/>
                    <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.object.status == 1" type="text" size="mini" @click="releaseStatus(scope.row, 0, '发布楼盘')">发布</el-button>
                            <el-button v-else type="text" size="mini" @click="releaseStatus(scope.row, 1, '撤销楼盘')">撤销</el-button>
                            <el-button type="text" size="mini" @click="toPath('createbuilding/' + scope.row.id)">编辑</el-button>
                            <el-button v-if="scope.row.object.status == 1" type="text" size="mini" @click="deleteDate(scope.row.id, '删除楼盘')">删除</el-button>
                            <!--<el-button type="text" size="mini" @click="handleUpdate(scope.row)">查看</el-button>-->
                        </template>
                    </el-table-column>
                    <el-table-column label="楼盘名称" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.buildingName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="城市" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.cityName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="楼旁状态" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.buildingStatus | buildingStatus }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="物业公司" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.propertyCompany }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建人" align="center">
                        <template slot-scope="scope">
                            <span>暂时没有</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.createTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布状态" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.status | releaseStatus }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="searchList" />
        </div>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination、
    export default {
        name: 'Project',
        components: {
            Pagination
        },
        data() {
            return {
                listQuery: {
                    level: 'building',
                    buildingName: '',
                    buildingStatus: '',
                    pageNum: 1,
                    pageSize: 10
                },
                multipleSelection: []
            }
        },
        created() {
            // todo 此处要优化，导入全局混入是初始化会一直调用
            this.searchList()
        },
        methods: {
            // 状态按钮的方法重定义
            searchListByReleaseStatus (status) {
                this.listQuery.status = status
                this.listQuery.pageNum = 1
                this.searchList()
            },
            // 选择复选框
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            // 导出
            exportBuilding() {
                alert('这里功能代码已有根据具体细节去完善。')
                // this.downloadLoading = true
                // import('@/vendor/Export2Excel').then(excel => {
                //     const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
                //     const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
                //     const data = this.formatJson(filterVal, this.list)
                //     excel.export_json_to_excel({
                //         header: tHeader,
                //         data,
                //         filename: 'table-list'
                //     })
                //     this.downloadLoading = false
                // })
            }
        }
    }
</script>
<style scoped>
</style>